<template>
    <div>
        <el-form :model="ruleForm" ref="ruleForm"  :rules = "rules" :label-position="labelPosition" label-width="120px" class="demo-ruleForm">
            <div class="container">
                <h3>供应商信息</h3>
                <el-row>
                    <el-col :span="12">
                            <el-form-item label="供应商名称：" prop="supplierName">
                        {{rulefrom.supplierName}}
                        </el-form-item>
                        
                        <el-form-item label="联系方式：" prop="phone"> 
                        {{rulefrom.phone}}
                        </el-form-item>
                        <el-form-item label="详细地址：" prop="address">
                        {{rulefrom.address}}
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="联系人姓名：" prop="phone">
                            {{rulefrom.userName}}
                        </el-form-item>
                        <el-form-item label="所在地区：" prop="area">
                            {{area}}
                        </el-form-item>
                        <el-form-item label="备注：" prop="phone">
                            {{rulefrom.remark}}
                        </el-form-item>
                    </el-col>
                </el-row>
            </div>
            <div class="container" style="margin-top:20px;">
                <h3>供货信息</h3>
                 <el-table
                :data="tableData"
                border
                ref="multipleTable"
                header-cell-class-name="table-header"
                style="margin-top:20px;">
                <el-table-column prop="createTime" sortable label="时间"></el-table-column>
                <el-table-column prop="inputsName" sortable label="品名"></el-table-column>
                <el-table-column prop="spec" sortable label="规格"></el-table-column>
                <el-table-column prop="number" sortable label="数量"></el-table-column>
                <el-table-column prop="units" sortable label="单位"></el-table-column>
            </el-table>
            <el-pagination layout="total, prev, pager, next, jumper" :page-size="pagesize" :current-page.sync="currentPage"  @current-change="handleCurrentChange" :total="total" style="margin-top:20px"></el-pagination>
            </div>
			<el-form-item class="footerFixed" label-width="0px">
			    <el-button @click="goback">返回</el-button>
			</el-form-item>
        </el-form>
    </div>
</template>

<script>
	import {regionData,CodeToText} from 'element-china-area-data'
	import {supplier_findById,supplier_findByListLog} from "@/request/api"
    export default {
        data(){
            return{
				labelPosition:"right",
				rules:{},
				id:'',
				rulefrom:{},
				tableData: [],
				city:'',
				area:'',
				total:0,
				pagesize:10,
				currentPage:1,
				ruleForm:{}
            }
        },
		mounted(){
			this.id = this.$route.query.id
			this.init()
		},
		methods:{
			goback(){
				this.$router.go(-1)
			},
			init(){
				supplier_findById(this.id).then((res)=>{
					this.rulefrom = res.data
					this.city = res.data.area.split(",")
					var arr = ""
					for (let i = 0; i < this.city.length; i++) {
					    arr += CodeToText[this.city[i]] + "/" 
					    
					}
					this.area = arr.substr(0,arr.length-1)
				});

                let data = {
                    page:this.currentPage,
                    supplierId:this.id
                }
                supplier_findByListLog(data).then((res)=>{
                    this.tableData = res.rows
                    this.total = res.total
                });
			},
			handleCurrentChange(val) {
				this.currentPage = val
				
			}
		}
    }
</script>

<style scoped>
 .el-pagination{
    text-align: center;
} 
</style>